<template>
  <div class="content" :style="{width:imgWidth,height:imgHeight}">
    <img :src="$imgUrl1+currentImage.url" ref="imgs" @load="handleImageLoad"/>
	<!-- <img src="https://oss.bslmedu.com/yuejuan/1.jpg" ref="imgs" @load="handleImageLoad"/> -->
    <canvas ref="markCanvas" tabindex='0'></canvas>
	<!-- <div class="routate" ref="draggableElement">
		<el-select v-model="questiontype" placeholder="请选择" @change="modeltypetab">
		    <el-option
		      v-for="item in questionList"
		      :key="item.id"
		      :label="item.name"
		      :value="item.id">
		    </el-option>
		</el-select>
		<el-button type="primary">{{circleselectionstatus==0?'圈选':circleselectionstatus==1?'圈选中':'取消圈选'}}</el-button>
	</div> -->
  </div>
</template>
<script>
import { mapState } from 'vuex';
import {draw, getJudge,delDraw} from "../../utils/drawCropper"; // 矩形绘制方法
export default {
  name: 'marks',
  props:['imageUrllist','parentData','modelarealistcavans','pagevale','drawStatus','scorenumber'],
  data() {
    return {
      // imageUrl: require('../../assets/image/cardmodle.jpg'),
      scale: 1,
      markList: [
		  // {
			 //  h:327,
			 //  w:618,
			 //  x:858,
			 //  y:511,
			 //  options:[
				 //  {
					//   h:22,
					//   w:44,
					//   x:875,
					//   y:518,
				 //  },
				 //  {
					//   h:22,
					//   w:44,
					//   x:936,
					//   y:518,
				 //  }
			  // ]
		  // }
	  ], // 标记内容数组
	  isDrawing:false,
	  questiontype:'',
	  questionList:[
	  	{
	  		name:'条形码',
	  		id:4
	  	},
	  	{
	  		name:'考号填涂',
	  		id:5
	  	},
	  	{
	  		name:'缺考标记',
	  		id:3
	  	}
	  ],
	  currentIndex: 0, // 当前图片索引
	  currentImage:{},
	  images:[],
	  value:'第1张',
	  options:[],
	  imgWidth:'',
	  imgHeight:''
    }
  },
  watch:{
    markList:function (val,oval){
	   this.$emit('updateMarkList', val);
    },
	modelarealistcavans:{
		handler(val,old){
			// //console.info(val)
			this.markList = val
			setTimeout(()=>{
				this.initCanvas(2); // 画布初始化
			},1000)

		},
		deep:true
	},
	pagevale(val,oval){
		this.currentImage = this.images[val - 1]; // 更新当前图片
	},
	imageUrllist:{
		handler(val,ova){
			// //console.info(this.pagevale)
			this.images = val
			this.currentImage = val[this.pagevale-1]; // 初始化当前图片
		},
		deep:true
	},
	drawStatus(val,old){
	   if(val){
			this.$emit('modeltype',val)  
			this.isDrawing = true
			// //console.info(this.isDrawing)
			this.$emit('objbasicparameters', '');
			let cav = this.$refs.markCanvas;
			// draw(cav, this.modelarealistcavans, undefined, this.isDrawing);
			// 调用封装的绘制方法，并传入onNewRectangle回调函数
			draw(cav, this.modelarealistcavans, undefined, this.isDrawing, (newRectangle) => {
				// 处理新矩形对象
				this.handleNewRectangle(newRectangle);
			});
	   } 
	}
  },
  created(){
	 
  },
  computed: {
      ...mapState(['circleselectionstatus']), // 从 Vuex 中获取状态
    },
  mounted() {
	 this.handleImageLoad();
	 this.currentImage = this.imageUrllist[this.currentIndex]; // 初始化当前图片
	document.addEventListener('customMouseDown', (event)=>{
	   // console.log(event);
	   
	});
  },
  methods: {
	handleImageLoad() {
	    this.initCanvas(1);
	},
	  getDraggableElement() {
	        return this.$refs.draggableElement;
	      },
	  modeltypetab(val){
		this.$emit('modeltype',val)  
		this.isDrawing = true
		// //console.info(this.isDrawing)
		 this.$emit('objbasicparameters', '');
		 let cav = this.$refs.markCanvas;
		//   draw(cav, this.modelarealistcavans, undefined, this.isDrawing);
		  draw(cav, this.modelarealistcavans, undefined, this.isDrawing, (newRectangle) => {
				// 处理新矩形对象
				this.handleNewRectangle(newRectangle);
			});
	  },
	  // startCrop(){
		 //  if(this.questiontype==''){
			//   this.$message({
			// 	message: '请选择类型',
			// 	type: 'warning'
			//   });
		 //  }else{
			//   this.isDrawing = true
			//   // //console.info(this.isDrawing)
			//    this.$emit('objbasicparameters', '');
			//    let cav = this.$refs.markCanvas;
			//     draw(cav, this.modelarealistcavans, undefined, this.isDrawing);
		 //  }
		  
	  // },
    /* 画布初始化 */
    initCanvas(num) {
      let that = this
      this.$nextTick(() => {
        // 初始化canvas宽高
        let cav = that.$refs.markCanvas;
		let ctx = cav.getContext('2d');
		ctx.strokeStyle = '#295CFF'
		cav.style.cursor = 'crosshair'
        const img = that.$refs.imgs;
		if(num==1){
			img.onload = () => {
			  cav.width = img.naturalWidth;
			  cav.height = img.naturalHeight;
			  that.imgHeight = img.naturalHeight;
			  that.imgWidth= img.naturalWidth;
			  //计算使用变量
			 console.info('that.markList',that.markList)
			  let list = that.markList; // 画框数据集合, 用于服务端返回的数据显示和绘制的矩形保存
			  // 若list长度不为0, 则显示已标记框
			 if (list.length !== 0) {
			 	// //console.info('dddddd')
			   list.forEach(function (value, index, array) {
					ctx.clearRect(value.x, value.y, value.w, value.h);
					  // 遍历绘制所有标记框
					ctx.beginPath();
					ctx.strokeStyle = '#295CFF';
					ctx.fillStyle = 'RGBA(102,102,102,0.2)'; // 设置背景颜色为蓝色
					ctx.rect(value.x, value.y, value.w, value.h);
					ctx.stroke();
					// 添加透明背景
					ctx.fillStyle = 'rgba(135, 206, 235, 0.2)'; // 设置背景颜色为半透明白色
					ctx.fillRect(value.x, value.y, value.w, value.h); // 填充矩形
					
					if (value.options && value.options.length > 0) {
						// //console.info(value.options.length);
						value.options.forEach(option => {
							ctx.beginPath();
							ctx.rect(option.x, option.y, option.w, option.h);
							ctx.stroke();
						});
					}
					
					
					// 新增题型显示 - 统一样式
					const typeButtonWidth = 80;
					const typeButtonHeight = 24;
					
					// 绘制文字背景 - 贴着矩形框顶部
					ctx.fillStyle = '#295CFF';
					ctx.fillRect(value.x, value.y - typeButtonHeight, typeButtonWidth, typeButtonHeight);
					
					// 设置文字样式
					ctx.fillStyle = 'white';
					ctx.font = '14px Microsoft YaHei';
					ctx.textAlign = 'center';
					ctx.textBaseline = 'middle';
					
					// 根据templatePointType显示不同内容
					let typeText = '';
					switch(value.templatePointType) {
						case 1: 
							typeText = '定位点';
							break;
						case 2:
							typeText = '文字定位点';
							break;
						case 3:
							typeText = '缺考标记';
							break;
						case 4:
							typeText = '条形码';
							break;
						case 5:
							typeText = '考号填涂';
							break;
						case 6:
							typeText = '客观题';
							break;
						default:
							typeText = '主观题';
					}
					let name=value.includedNumbers!=undefined?value.includedNumbers:''
					// 绘制文字 - 调整文字垂直位置，确保居中
					ctx.fillText(typeText+name, value.x + typeButtonWidth/2, value.y - typeButtonHeight/2);
							
			   });
			 }
			   cav.addEventListener('click', function(event) {
			  	const rect = cav.getBoundingClientRect();
			  	const x = event.clientX - rect.left;
			  	const y = event.clientY - rect.top;
			  	that.handleCanvasClick(x, y);
			  });
			  // 调用封装的绘制方法，并传入onNewRectangle回调函数
				draw(cav, list, undefined, true, (newRectangle) => {
					// 处理新矩形对象
					that.handleNewRectangle(newRectangle);
				});
			}
		}else{
			cav.width = img.naturalWidth;
			cav.height = img.naturalHeight;
			that.imgHeight = img.naturalHeight;
			that.imgWidth= img.naturalWidth;
			// 计算使用变量
			console.info('that.markList1',that.markList)
			let list = that.markList; // 画框数据集合, 用于服务端返回的数据显示和绘制的矩形保存
			// 若list长度不为0, 则显示已标记框
			if (list.length !== 0) {
				// //console.info('dddddd')
			  list.forEach(function (value, index, array) {
				  ctx.clearRect(value.x, value.y, value.w, value.h);
				  // 遍历绘制所有标记框
				ctx.beginPath();
				ctx.strokeStyle = '#295CFF';
				ctx.rect(value.x, value.y, value.w, value.h);
				ctx.stroke();
				// 添加透明背景
				ctx.fillStyle = 'rgba(135, 206, 235, 0.2)'; // 设置背景颜色为半透明白色
				ctx.fillRect(value.x, value.y, value.w, value.h); // 填充矩形
				if (value.options && value.options.length > 0) {
					// //console.info(value.options.length);
					value.options.forEach(option => {
						ctx.beginPath();
						ctx.rect(option.x, option.y, option.w, option.h);
						ctx.stroke();
					});
				}
				
				
				// 新增题型显示 - 统一样式
				const typeButtonWidth = 80;
				const typeButtonHeight = 24;
				
				// 绘制文字背景 - 贴着矩形框顶部
				ctx.fillStyle = '#295CFF';
				ctx.fillRect(value.x, value.y - typeButtonHeight, typeButtonWidth, typeButtonHeight);
				
				// 设置文字样式
				ctx.fillStyle = 'white';
				ctx.font = '14px Microsoft YaHei';
				ctx.textAlign = 'center';
				ctx.textBaseline = 'middle';
				
				// 根据templatePointType显示不同内容
				let typeText = '';
				switch(value.templatePointType) {
					case 1: 
						typeText = '定位点';
						break;
					case 2:
						typeText = '文字定位点';
						break;
					case 3:
						typeText = '缺考标记';
						break;
					case 4:
						typeText = '条形码';
						break;
					case 5:
						typeText = '考号填涂';
						break;
					case 6:
						typeText = '客观题';
						break;
					default:
						typeText = '主观题';
				}
				
				let name=value.includedNumbers!=undefined?value.includedNumbers:''
				// 绘制文字 - 调整文字垂直位置，确保居中
				ctx.fillText(typeText+name, value.x + typeButtonWidth/2, value.y - typeButtonHeight/2);
				
			  });
			}
			 cav.addEventListener('click', function(event) {
				const rect = cav.getBoundingClientRect();
				const x = event.clientX - rect.left;
				const y = event.clientY - rect.top;
				that.handleCanvasClick(x, y);
			});
			// 调用封装的绘制方法，并传入onNewRectangle回调函数
			draw(cav, list, undefined, true, (newRectangle) => {
				// 处理新矩形对象
				that.handleNewRectangle(newRectangle);
			});
		}
      })

    },
	 handleNewRectangle(newRectangle) {
      this.$emit('newRectangle', newRectangle);
    },
	// 计算按钮位置
	getButtonPositions(mark) {
		const buttonWidth = 60;
		const buttonHeight = 20;
		const buttonMargin = 5;
		
		const editButtonX = mark.x + mark.w - buttonWidth - buttonMargin;
		const editButtonY = mark.y + mark.h + buttonMargin;
		const deleteButtonX = editButtonX - buttonWidth - buttonMargin;
		const deleteButtonY = editButtonY;
		
		return {
			edit: {
				x: editButtonX,
				y: editButtonY,
				width: buttonWidth,
				height: buttonHeight
			},
			delete: {
				x: deleteButtonX,
				y: deleteButtonY,
				width: buttonWidth,
				height: buttonHeight
			}
		};
	},
	
	// 检查点击是否在按钮区域内
	isClickInButton(x, y, button) {
		return x > button.x && 
			   x < button.x + button.width && 
			   y > button.y && 
			   y < button.y + button.height;
	},
	
	// 处理画布点击
	handleCanvasClick(x, y) {
	  // 检查点击时间间隔
	  const now = Date.now();
	  if (now - this.lastClickTime < this.clickDelay) {
	    return;
	  }
	  this.lastClickTime = now;
	  
	  if (this.isProcessing) return;
	  
	  let list = this.markList;
	  let handled = false;
	  
	  list.some((mark, index) => {
	    if (handled) return true;
	    
	    const buttons = this.getButtonPositions(mark);
	    
	    if (this.isClickInButton(x, y, buttons.edit)) {
	      handled = true;
	      this.handleEdit(mark);
	      return true;
	    }
	    
	    if (this.isClickInButton(x, y, buttons.delete)) {
	      handled = true;
	      this.handleMarkDelete(mark, index);
	      return true;
	    }
	    
	    return false;
	  });
	},
	
	// 处理编辑
	handleEdit(mark) {
	  // 防止重复处理
	  if (this.isProcessing) return;
	  
	  try {
	    this.isProcessing = true;
		let obj = {ishow:true}
		const mergedObj = Object.assign({}, obj, mark);
		this.$emit('editContent',mergedObj)
	    // //console.info('编辑按钮被点击', mark); // 添加mark信息以便调试
	    // 这里添加你的编辑逻辑
	  } finally {
	    this.isProcessing = false;
	  }
	},
	
	// 处理删除
	async handleMarkDelete(mark, index) {
		try {
			this.isProcessing = true;
			
			if (mark.id) {
				// 删除服务器数据
				await this.deleteFromServer(mark.id);
			} else {
				// 删除本地数据
				this.deleteLocal(index);
			}
		} finally {
			this.isProcessing = false;
		}
	},
	
	// 从服务器删除
	async deleteFromServer(id) {
		try {
			const res = await dele('/template/cuttingregion/delete', 
				{ id },
				{
					headers: {
						'Content-Type': 'x-www-form-urlencoded',
					}
				}
			);
			
			if (res.code === 200) {
				this.$message.success('删除成功');
				this.$emit('refreshdata');
			} else {
				throw new Error(res.message || '删除失败');
			}
		} catch (error) {
			console.error('Delete error:', error);
			this.$message.error(error.message || '删除失败');
			throw error;
		}
	},
	
	// 本地删除
	deleteLocal(index) {
		this.markList.splice(index, 1);
		this.$message.success('删除成功');
	},
	// handleCanvasClick(x, y) {
	// 	let list = this.markList;
	// 	list.forEach(function (value, index) {
	// 		const buttonWidth = 60;
	// 		const buttonHeight = 20;
	// 		const buttonMargin = 5;
			
	// 		const editButtonX = value.x + value.w - buttonWidth - buttonMargin;
	// 		const editButtonY = value.y + value.h + buttonMargin;
	// 		const deleteButtonX = editButtonX - buttonWidth - buttonMargin;
	// 		const deleteButtonY = editButtonY;
	// 		if (x > editButtonX && x < editButtonX + buttonWidth && y > editButtonY && y < editButtonY + buttonHeight) {
	// 			alert('编辑按钮被点击');
	// 			// 执行编辑操作
	// 		} else if (x > deleteButtonX && x < deleteButtonX + buttonWidth && y > deleteButtonY && y < deleteButtonY + buttonHeight) {
	// 			list.splice(index, 1);
	// 			// 执行删除操作
	// 		}
	// 	});
	// }
  },
 beforeDestroy() {
    // 移除事件监听器
    document.removeEventListener('customMouseDown',(event)=>{})
  }
}
</script>
<style scoped>
.content {
  position: relative;
}
img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
    z-index: 9;
  }

  canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .routate{
  	position:fixed;
  	left:25px;
  	top:110px;
  	background:#fff;
  	height:60px;
  	display: flex;
  	align-items: center;
  	padding:0 10px;
  	box-shadow: 0 0 10px rgba(0,0,0,0.4);
  	border-radius:5px;
  	font-size:14px;
  	color:#557292;
  	border-radius: 10px;
	z-index:111;
  }
  .el-select,.el-input{
  	width:100px;
  }
  .el-select{
  	margin-right:10px;
  	margin-left:10px;
  }
  .el-input{
  	margin-left:10px;
  	margin-right:10px;
  }
   .routate >>> .el-button{
  	border-radius:10px;
  	height:35px;
  	padding:0 10px;
  }
  .routate >>> .el-input__inner{
  	border-radius:10px;
  	height:35px;
  }
</style>